<template>
  <div class="sys-all">
    <ul>
      <li
        v-for="item in appList"
        :key="item.serviceType"
        :class="item.serviceType==currentCode?'active':''"
        @click="toRoute(item.serviceType)"
      >
        <img
          v-if="item.serviceType==currentCode"
          :src="item.checkedIcon"
          alt=""
        >
        <img
          v-else
          :src="item.icon"
          alt=""
          srcset=""
        >
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { queryAppList } from "@/api/orgPosition";
import { useMenu } from "@/compositions/main/useMenu";

const { toRoute } = useMenu()
const appList = ref([] as Array<any>);
const getAppPageList = () => {
  let aa = []
  store.state.user.allPermission.forEach(ele => {
    if (ele.permissionLayer.length > 0){
      aa.push(ele)
    }
  });
  appList.value = aa
};
const store = useStore();
const currentCode = computed(() => {
  return store.state.user.currentService
})
onMounted(() => {
  getAppPageList()
});
</script>

<style scoped lang="scss">
.sys-all{
  position: fixed;
  top:60px;
  width:60px;
  height: calc(100vh - 60px);
  padding-top:20px;
  box-sizing: border-box;
  background: #01165A;
  ul{
    list-style: none;
    li{
      width:60px;
      height:60px;
      display: flex;
      align-items: center;
      justify-content: center;
      img{
        width:40px;
        height:40px;
      }
      &.active{
        background: #FFFFFF;
      }
    }
  }
}
</style>
